<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/cutom-icon/iconfont.css">
    <style type="text/css">
    body{
    	overflow-y:hidden;
    }
    html {
    	overflow-y:hidden;
    }
    /* 头部样式 */
    .aui-searchbar {
        background: transparent;
    }
    /* 头部切换样式 */
    .titlebar {display: none;}
    .activebar {display: block;}
    .aui-bar {padding-top: 20px;}
    #footer{
      padding-top:0;border-top: 1px solid #CCCCCC;
    }
    .iconfont {
       font-size: 20px;
    }
    </style>
</head>
<body>
    <div id="wrap">
      <div id="zeroHeader" class="titlebar">
          <header class="aui-bar aui-bar-nav">
              <a class="aui-btn aui-pull-left">
                  <span class="aui-iconfont"></span>
              </a>
              <div class="aui-title">消息</div>
          </header>
      </div>

      <div id="firstHeader" class="titlebar activebar">
          <header class="aui-bar aui-bar-nav" id="head_id">
              <a class="aui-btn aui-pull-left">
                    <span class="aui-iconfont"></span>
              </a>
              <div class="aui-title">工作台</div>
          </header>
      </div>

      <!-- 第二头部 -->
      <div id="secHeader" class="titlebar">
          <header class="aui-bar aui-bar-nav">
              <a class="aui-btn aui-pull-left">
                  <span class="aui-iconfont"></span>
              </a>
              <div class="aui-title">通讯录</div>
          </header>
      </div>

      <!-- 第三头部 -->
      <div id="thridHeader" class="titlebar">
          <header class="aui-bar aui-bar-nav">
              <a class="aui-btn aui-pull-left">
                  <span class="aui-iconfont"></span>
              </a>
              <div class="aui-title">我的</div>
          </header>
      </div>


        <div id="main">

        </div>
        <footer class="aui-bar aui-bar-tab" id="footer">
            <div class="aui-bar-tab-item" tapmode onclick="switchframe('msg_list_frm')">
                <i class="iconfont icon-xiaoxi"></i>
                <div class="aui-bar-tab-label" >消息</div>
            </div>
            <div class="aui-bar-tab-item aui-active" tapmode onclick="switchframe('workbench_frm')">
                <i class="iconfont icon-fenlei"></i>
                <div class="aui-bar-tab-label">工作台</div>
            </div>
            <div class="aui-bar-tab-item" tapmode onclick="switchframe('mail_list_frm')">
                <i class="iconfont icon-tuandui"></i>
                <div class="aui-bar-tab-label" >通讯录</div>
            </div>
            <div class="aui-bar-tab-item" tapmode onclick="switchframe('my_info_frm')">
                <i class="iconfont icon-geren"></i>
                <div class="aui-bar-tab-label">我</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    var header = $api.byId('head_id');
    var headerOffset = $api.offset(header);
    var firstHeaderIndexHeight;
    var main      = $api.byId('main');
    var mainPos   = $api.offset(main);

    var footer    = $api.byId('footer');
    var footerPos = $api.offset(footer);
    var isZeroOpen = false;
    var isFirstOpen = false;
    var isSecondOpen = false;
    var isThirdOpen = false;

    apiready = function(){
        // 设置ios7的标题栏字体变亮，全局用一个就行了
        api.setStatusBarStyle({
            style: 'light'
        });
        //适配iOS 7+，Android 4.4+状态栏
        $api.fixStatusBar(header);
        //打开首页
        api.openFrame ({
           name: 'workbench_frm',
           url: './html/workbench_frm.html',
           rect:{
               x:0,
               y:headerOffset.h,
               w:'auto',
               h:api.frameHeight-headerOffset.h -footerPos.h
           },
           pageParam: {name: headerOffset.h + footerPos.h},
           bounces:true,
           vScrollBarEnabled:false,
           hScrollBarEnabled:false
       });
       //判断是否登录
       if($api.getStorage('username')){

       }else{
            api.openWin({
                name: 'login',
                url: './html/login_win.html',
                slidBackEnabled: false,
            });
            return false;
       }
       //判断是绑定手机号
       if($api.getStorage('phone')){

       }else{
            api.openWin({
                name: 'bind_phone',
                url: './html/bind_phone_win.html',
                slidBackEnabled: false,
            });
       }

    };

    // ===================================
    // 响应底部按钮的切换frame
    // ===================================
    function switchframe(type) {
        switch (type) {
            case 'msg_list_frm':
                randomSwitchBtn('msg_list_frm', 0);
                hideAllFrame();
                if (isFirstOpen) {
                    showframe('msg_list_frm');
                }
                else {
                    openframeinstance('msg_list_frm', headerOffset.h, false);
                break;
                    isZeroOpen = true;
                }
                break;
            case 'workbench_frm':
                randomSwitchBtn('workbench_frm', 1);
                hideAllFrame();
                if (isFirstOpen) {
                    showframe('workbench_frm');
                }
                else {
                    openframeinstance('workbench_frm', headerOffset.h, false);
                break;
                    isFirstOpen = true;
                }
                break;
            case 'mail_list_frm':
                randomSwitchBtn('mail_list_frm', 2);
                hideAllFrame();
                if (isSecondOpen) {
                    showframe('mail_list_frm');
                }
                else {
                    openframeinstance('mail_list_frm', headerOffset.h, false);
                    isSecondOpen = true;
                }
                break;
            case 'my_info_frm':
                randomSwitchBtn('my_info_frm', 3);
                hideAllFrame();
                if (isThirdOpen) {
                    showframe('my_info_frm');
                }
                else {
                    openframeinstance('my_info_frm', headerOffset.h, false);
                    isThirdOpen = true;
                }
                break;
            default:
                break;
        }

    }

    // 打开frame
    function openframeinstance(frame, marginTop, isBounce) {
        api.openFrame({
            name: frame,
            url: './html/'+frame+'.html',
            rect: {
                x: 0,
                y: marginTop,
                w: 'auto',
                h: api.frameHeight - marginTop - footerPos.h
            },
            // pageParam: {name: marginTop + footerPos.h},
            bounces: true,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            //delay: 200
        });
    }

    // 展示指定的frame
    function showframe(type) {
        api.setFrameAttr({
            name: type,
            hidden: false
        });
    }

    // 隐藏所有的一级frame
    function hideAllFrame() {
        api.setFrameAttr({
            name: 'msg_list_frm',
            hidden: true
        });

        api.setFrameAttr({
            name: 'workbench_frm',
            hidden: true
        });

        api.setFrameAttr({
            name: 'mail_list_frm',
            hidden: true
        });
        api.setFrameAttr({
             name: 'my_info_frm',
             hidden: true
        });
    }

    // 随意切换按钮
    function randomSwitchBtn(name, index) {
        var lis = $api.domAll('.aui-bar-tab-item');
        var i = 0,
            len = lis.length;
        var curLi = lis[index];

        for (i; i < len; i++) {
            var thisLi = lis[i];
            if (thisLi === curLi) {
                $api.addCls(thisLi, 'aui-active');
                $api.addCls(thisLi, 'aui-active' + index);
                continue;
            } else {
                if ($api.hasCls(thisLi, 'aui-active')) {
                    $api.removeCls(thisLi, 'aui-active');
                    $api.removeCls(thisLi, 'aui-active' + i);
                }
            }
        }

        // 切换头部
        var lis = $api.domAll('.titlebar');
        var i = 0,
            len = lis.length;
        var curLi = lis[index];

        for (i; i < len; i++) {
            var thisLi = lis[i];
            if (thisLi === curLi) {
                $api.addCls(thisLi, 'activebar');
                $api.addCls(thisLi, 'activebar' + index);
                continue;
            } else {
                if ($api.hasCls(thisLi, 'activebar')) {
                    $api.removeCls(thisLi, 'activebar');
                    $api.removeCls(thisLi, 'activebar' + i);
                }
            }
        }

        //$api.fixStatusBar( $api.dom( '.titlebar.activebar') );
    }




</script>
</html>
